<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>箭头函数中的this</title>
        <script type="text/javascript">
            
            console.log( this === window );
            console.log( this === globalThis );
            
            this.name = '佚名';

            const x = {
                name: '德芳',
                // 将一个箭头函数作为属性值
                introduce: () => {
                    // 箭头函数中的 this 就是该箭头函数所在作用域中已经绑定过的 this
                    console.log(`我是${this.name}`);
                },
                // 定义方法(本质上是定义了一个函数)
                toString(){
                    return `{ name: ${this.name} }`;
                }
            }

            // 因为 introduce 是个箭头函数，
            // 因此 通过 `x.introduce` 调用该函数时，
            // 其内部的 this 指向上下文中已经存在的 this
            x.introduce();
            // 对于 `x.toString()` 来说，`toString` 内部的 this 指向 x 对应的实例
            console.log( x.toString() );

            x.introduce.call( globalThis );
            x.introduce.apply( globalThis );

        </script>
    </head>
    <body>
        <h3>箭头函数中的this指向谁?</h3>
        <p>请在浏览器终端中查看运行结果</p>
    </body>
</html>